<template>
  <ul class="comment">
    <li v-for="item in commentList" :key="item.username" class="item">
      <div class="item-pic">
        <el-avatar :size="65" :src="item.userImg"></el-avatar>
      </div>
      <div class="item-content-box">
        <div class="item-title">
          <span class="username">{{item.username}}</span>
          <el-rate v-model="item.rate" disabled show-score text-color="#ff9900"></el-rate>
        </div>
        <p class="item-comment">{{item.content}}</p>
      </div>
    </li>
  </ul>
</template>

<script>
import { Avatar, Rate } from "element-ui";
export default {
  data() {
    return {
      commentList: [
        {
          username: "带你么事的",
          userImg:
            "//img1.sycdn.imooc.com/user/585d5674000133c801000100-100-100.jpg",
          rate: 4.9,
          content:
            "课程开始到七八章的时候就想来评论，但看到别的同学说老师对面向对象的讲解非常透彻，所以决定把后面都听完再来。自学python2，后来为了面试去看很多关于装饰器啊闭包啊垃圾回收内存泄漏啊各种关键字啊with方法啊这种博文，自己看起来确实很难理解，因为大多数人会写“这东西是什么”，但老师是告诉我们“为什么这东西是这样”或者“在什么场景适应什么需求有什么好处才会用这东西”，这让我们对知识本身会有更深刻的理解，而且在听课过程中思考的各种问题，老师都会在接下来的一两分钟提到（真是一件神奇的事情），这足以证明老师对课程和对同学所问的问题是非常精心的归纳、整理和准备的，收获真的很多！谢谢老师！"
        },
        {
          username: "带你么事的",
          userImg:
            "//img1.sycdn.imooc.com/user/585d5674000133c801000100-100-100.jpg",
          rate: 4.9,
          content:
            "课程开始到七八章的时候就想来评论，但看到别的同学说老师对面向对象的讲解非常透彻，所以决定把后面都听完再来。自学python2，后来为了面试去看很多关于装饰器啊闭包啊垃圾回收内存泄漏啊各种关键字啊with方法啊这种博文，自己看起来确实很难理解，因为大多数人会写“这东西是什么”，但老师是告诉我们“为什么这东西是这样”或者“在什么场景适应什么需求有什么好处才会用这东西”，这让我们对知识本身会有更深刻的理解，而且在听课过程中思考的各种问题，老师都会在接下来的一两分钟提到（真是一件神奇的事情），这足以证明老师对课程和对同学所问的问题是非常精心的归纳、整理和准备的，收获真的很多！谢谢老师！"
        },
        {
          username: "带你么事的",
          userImg:
            "//img1.sycdn.imooc.com/user/585d5674000133c801000100-100-100.jpg",
          rate: 4.9,
          content:
            "课程开始到七八章的时候就想来评论，但看到别的同学说老师对面向对象的讲解非常透彻，所以决定把后面都听完再来。自学python2，后来为了面试去看很多关于装饰器啊闭包啊垃圾回收内存泄漏啊各种关键字啊with方法啊这种博文，自己看起来确实很难理解，因为大多数人会写“这东西是什么”，但老师是告诉我们“为什么这东西是这样”或者“在什么场景适应什么需求有什么好处才会用这东西”，这让我们对知识本身会有更深刻的理解，而且在听课过程中思考的各种问题，老师都会在接下来的一两分钟提到（真是一件神奇的事情），这足以证明老师对课程和对同学所问的问题是非常精心的归纳、整理和准备的，收获真的很多！谢谢老师！"
        },
        {
          username: "带你么事的",
          userImg:
            "//img1.sycdn.imooc.com/user/585d5674000133c801000100-100-100.jpg",
          rate: 4.9,
          content:
            "课程开始到七八章的时候就想来评论，但看到别的同学说老师对面向对象的讲解非常透彻，所以决定把后面都听完再来。自学python2，后来为了面试去看很多关于装饰器啊闭包啊垃圾回收内存泄漏啊各种关键字啊with方法啊这种博文，自己看起来确实很难理解，因为大多数人会写“这东西是什么”，但老师是告诉我们“为什么这东西是这样”或者“在什么场景适应什么需求有什么好处才会用这东西”，这让我们对知识本身会有更深刻的理解，而且在听课过程中思考的各种问题，老师都会在接下来的一两分钟提到（真是一件神奇的事情），这足以证明老师对课程和对同学所问的问题是非常精心的归纳、整理和准备的，收获真的很多！谢谢老师！"
        },
        {
          username: "带你么事的",
          userImg:
            "//img1.sycdn.imooc.com/user/585d5674000133c801000100-100-100.jpg",
          rate: 4.9,
          content:
            "课程开始到七八章的时候就想来评论，但看到别的同学说老师对面向对象的讲解非常透彻，所以决定把后面都听完再来。自学python2，后来为了面试去看很多关于装饰器啊闭包啊垃圾回收内存泄漏啊各种关键字啊with方法啊这种博文，自己看起来确实很难理解，因为大多数人会写“这东西是什么”，但老师是告诉我们“为什么这东西是这样”或者“在什么场景适应什么需求有什么好处才会用这东西”，这让我们对知识本身会有更深刻的理解，而且在听课过程中思考的各种问题，老师都会在接下来的一两分钟提到（真是一件神奇的事情），这足以证明老师对课程和对同学所问的问题是非常精心的归纳、整理和准备的，收获真的很多！谢谢老师！"
        }
      ]
    };
  },
  components: {
    ElAvatar: Avatar,
    ElRate: Rate
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .comment {
    width: 900px;
    .item {
      margin-bottom: 30px;
      overflow: hidden;
      display: flex;
      justify-content: flex-start;
      &-pic {
        box-sizing: border-box;
        width: 10%;
      }
      &-content-box {
        box-sizing: border-box;
        width: 90%;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        .item-title {
          margin-bottom: 15px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .username {
            font-size: 16px;
            color: #1c1f21;
            line-height: 24px;
            margin-right: 10px;
            font-weight: 700;
          }
        }
        .item-comment {
          font-size: 15px;
          padding-bottom: 20px;
          color: #1c1f21;
          text-align: left;
          line-height: 28px;
          word-wrap: break-word;
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (max-width: 992px) and (min-width: 768px) {
}
@media screen and (max-width: 768px) and (min-width: 576px) {
}
@media screen and (max-width: 576px) {
  .comment {
    margin: 20px auto !important;
    width: 100%;
    .item {
      margin-bottom: 30px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      &-pic {
        box-sizing: border-box;
        text-align: center;
      }
      &-content-box {
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        .item-title {
          margin: 10px auto;
          display: flex;
          justify-content: center;
          align-items: center;
          .username {
            font-size: 14px;
            color: #1c1f21;
            margin-right: 5px;
            font-weight: 700;
          }
        }
        .item-comment {
          width: 100%;
          font-size: 15px;
          padding-bottom: 20px;
          color: #1c1f21;
          text-align: left;
          line-height: 28px;
          word-wrap: break-word;
        }
      }
    }
  }
}
</style>